<!-- 角色列表 -->
<template>
  <div class="rolelist">
    <el-col :span="24">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-card class="box-card">
      <div class="text item" style="line-height: 0;text-align: left;">
        <el-button type="primary" style="margin-bottom: 20px;" @click="btnStatus.isShow = true">新增角色</el-button>
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="expand">
            <!-- <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand"
                v-for="(firstLevel, firstIndex) in props.row.children">
                <el-form-item>
                  <el-tag @click="handleClick(firstLevel, props.row.id)">{{ firstLevel.authName }} <p
                      class="iconfont el-icon-close"></p></el-tag>
                </el-form-item>
                <el-form-item v-for="(secondLevel, secondIndex) in firstLevel.children">
                  <el-tag type="success" @click="handleClick(secondLevel, props.row.id)">{{ secondLevel.authName }} <p
                      class="iconfont el-icon-close"></p></el-tag>

                  <el-form-item v-for="(thirdLevel, thirdIndex) in firstLevel.children.reduce((acc, cur) => {
                    if (cur.children) {
                      return acc.concat(cur.children);
                    }
                    return acc;
                  }, [])">
                    <el-tag type="info" @click="handleClick(thirdLevel, props.row.id)">{{ thirdLevel.authName }} <p
                        class="iconfont el-icon-close"></p></el-tag>
                  </el-form-item>
                </el-form-item>
              </el-form>
            </template> -->
            <el-form>
              <el-row v-for="firstItem in roleList.children">
                <el-col>

                </el-col>
                <el-col :span="20">
                  <el-row>
                    <el-col :span="8">

                    </el-col>
                    <el-col :span="16">

                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-form>

          </el-table-column>
          <el-table-column label="">
            <!-- 箭头 -->
            <template slot-scope="scope">
              <el-icon>
                <arrow-right />
              </el-icon>
            </template>
          </el-table-column>
          <el-table-column label="" prop="id">
          </el-table-column>
          <el-table-column label="角色名称" prop="roleName">
          </el-table-column>
          <el-table-column label="描述" prop="roleDesc">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="editRole(scope.row.id)">编辑</el-button>
              <el-button type="danger" @click="delRole(scope.row.id)">删除</el-button>
              <el-button type="info" @click="setRole(scope.row.id)">设置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 新增角色弹窗 -->
    <el-dialog title="添加角色" :visible.sync="btnStatus.isShow" width="30%" center style="line-height: 0;">
      <el-form ref="formRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input autocomplete="off" v-model="formAddData.roleName" />
          <span style="display: block; height: 20px;color: red;">{{ formAddData.roleNameMsg }}</span>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input autocomplete="off" v-model="formAddData.roleDesc" />
          <span style="display: block; height: 20px;color: red;">{{ formAddData.roleDescMsg }} </span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnStatus.isShow = false">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑角色弹出框 -->
    <el-dialog title="编辑角色" :visible.sync="btnStatus.isEdit" width="30%" center style="line-height: 0;">
      <el-form ref="formRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input autocomplete="off" v-model="formEditData.roleName" placeholder="原角色名称" />
          <span style="display: block; height: 20px;color: red;">{{ formEditData.roleNameMsg }}</span>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input autocomplete="off" v-model="formEditData.roleDesc" placeholder="原角色描述" />
          <span style="display: block; height: 20px;color: red;">{{ formEditData.roleDescMsg }} </span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnStatus.isEdit = false">取 消</el-button>
        <el-button type="primary" @click="updateRole">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分配权限弹出框 -->
    <el-dialog title="分配权限" :visible.sync="formSetRoleData.isSet" width="30%" center style="line-height: 0;">
      <el-tree :data="roleList" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="{
        children: 'children',
        label: 'authName'
      }">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formSetRoleData.isSet = false">取 消</el-button>
        <el-button type="primary" @click="setRoleAuth">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>
    <script>
    import axios from 'axios'
    export default {
      data() {
        return {
          baseURL: 'http://43.138.15.137:7000/api/private/v1',
          token: localStorage.getItem('token'),
          tableData: [],
          // 角色列表
          roleList: [],
          // 按钮状态数组
          btnStatus: {
            isShow: false,
            isEdit: false,
            isDel: false,
            isSet: false
          },
          // 添加角色
          formAddData: {
            roleName: '',
            roleDesc: '',
            // 提示
            roleNameMsg: '',
            roleDescMsg: ''
          },
          // 编辑角色
          formEditData: {
            roleid: '',
            roleName: '',
            roleDesc: '',
            // 提示
            roleNameMsg: '',
            roleDescMsg: ''
          },
          // 删除角色对象数组
          formDelRoleData: {
            roleid: 0,
          },
          // 分配权限
          formSetRoleData: {
            roleid: 0,
            authId: [],
            isSet: false
          },
          // 删除角色指定权限
          formDelRoleAuthData: {
            roleid: 0,
            authId: 0
          },

        }
      },
      created() {
        this.getRoleList()
        axios.get(`${this.baseURL}/rights/tree`, {
          headers: {
            'Authorization': this.token
          }
        }).then(res => {
          this.roleList = res.data.data
          console.log(this.roleList);
        })
      },
      methods: {
        async getRoleList() {
          const res = await axios.get(this.baseURL + '/roles', {
            headers: {
              'Authorization': this.token
            }
          }).then(res => {
            let data = res.data.data
            this.tableData = data
          })
        },
        addRole() {
          this.btnStatus.isShow = false
          // 校验
          if (this.formAddData.roleName == '') {
            this.formAddData.roleNameMsg = '请输入角色名称'
            return
          }
          if (this.formAddData.roleDesc == '') {
            this.formAddData.roleDescMsg = '请输入角色描述'
            return
          }
          axios.post(this.baseURL + '/roles', {
            roleName: this.formAddData.roleName,
            roleDesc: this.formAddData.roleDesc
          }, {
            headers: {
              'Authorization': this.token
            }
          }).then(res => {
            console.log(res);
            let { data, meta } = res.data
            if (meta.status == 201) {
              this.getRoleList()
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.formAddData.roleName = ''
              this.formAddData.roleDesc = ''
            }
          })
        },
        editRole(id) {
          this.btnStatus.isEdit = true
          this.formEditData.roleid = id
          // 校验
        },
        updateRole() {
          // 校验
          if (this.formEditData.roleName == '') {
            this.formEditData.roleNameMsg = '请输入角色名称'
            return
          }
          if (this.formEditData.roleDesc == '') {
            this.formEditData.roleDescMsg = '请输入角色描述'
            return
          }
          axios.put(this.baseURL + '/roles/' + this.formEditData.roleid, {
            roleName: this.formEditData.roleName,
            roleDesc: this.formEditData.roleDesc
          }, {
            headers: {
              'Authorization': this.token
            }
          }).then(res => {
            this.btnStatus.isEdit = false
            let { data, meta } = res.data
            if (meta.status == 200) {
              this.getRoleList()
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.formEditData.roleName = ''
              this.formEditData.roleDesc = ''
            }
          })
        },
        delRole(id) {
          this.formDelRoleData.roleid = id
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            axios.delete(this.baseURL + '/roles/' + this.formDelRoleData.roleid, {
              headers: {
                'Authorization': this.token
              }
            }).then(res => {
              this.getRoleList()
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        setRole(id) {
          this.formSetRoleData.isSet = true
          this.formSetRoleData.roleid = id
        },
        setRoleAuth() {
          let authId = this.$refs.tree.getCheckedKeys()
          axios.post(this.baseURL + '/roles/' + this.formSetRoleData.roleid + '/rights', {
            // 字符串拼接
            rids: authId.join(',')
          }, {
            headers: {
              'Authorization': this.token
            }
          }).then(res => {
            let { data, meta } = res.data
            if (meta.status == 200) {
              this.$message({
                message: '分配成功',
                type: 'success'
              })
              this.formSetRoleData.isSet = false
              this.getRoleList()
            }
          })
        },
        handleClick(item, roleid) {
          this.formDelRoleAuthData.roleid = roleid
          this.formDelRoleAuthData.authId = item.id
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            axios.delete(this.baseURL + '/roles/' + this.formDelRoleAuthData.roleid + '/rights/' + this.formDelRoleAuthData.authId, {
              headers: {
                'Authorization': this.token
              }
            }).then(res => {
              let { data, meta } = res.data
              if (meta.status == 200) {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                this.getRoleList()
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });

        }

      }
    }
</script>